<script>
    var documentId;
    function nextPage(pageNo){
         $("#document-listing").load("<?= $this->baseURI(); ?>planning/document/list/0/"+pageNo);
    }
    function editDocument(id){
        documentId = id;
        $("#edit-document-form").load("<?= $this->baseURI(); ?>planning/document/edit/"+id);
        $("#edit-document-form" ).dialog( "open" );
    }
    function deleteDocument(id){

        $(function() {

            $( "#dialog:ui-dialog" ).dialog( "destroy" );
            $( "#delete-confirm" ).dialog({
                resizable: false,
                height:200,
                modal: true,
                buttons: {
                    "Delete": function() {
                        $.ajax({
                            type: "POST",
                            url: "<?= $this->baseURI(); ?>planning/document/delete/"+id,
                            success: function(msg){
                                $("#document-listing").load("<?= $this->baseURI(); ?>planning/document/list");
                            }
                        });
                        $( this ).dialog( "close" );
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            });

        });
    }

    $(function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );

        function updateTips( t ) {
            tips = $( ".validateTips" );
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 500 );
        }

        function checkLength( o, n, min, max ) {

            if ( o.val().length > max || o.val().length < min ) {
                o.addClass( "ui-state-error" );
                updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                return false;
            } else {
                return true;
            }
        }

        $( "#add-document-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 450,
            modal: true,
            buttons: {
                "Add": function() {
                    $('#document_form').submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#add-document-form').html('');
                }
            },
            close: function() {
                $('#add-document-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

        $( "#edit-document-form" ).dialog({
            autoOpen: false,
            height: 300,
            width: 450,
            modal: true,
            buttons: {
                "Edit": function() {
                    $('#document_form').submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                    $('#edit-document-form').html('');
                }
            },
            close: function() {
                $('#edit-document-form').html('');
                //   allFields.val( "" ).removeClass( "ui-state-error" );
            }
        });

    });

</script>
<div class="dataBoxOver">
    <div class="dataInnRep">
        <div class="dataInnTop" id="document-listing">
            <?php echo $this->render('document/list.phtml'); ?>
        </div>
    </div>
</div>
<div id="add-document-form" title="Add document"></div>
<div id="edit-document-form" title="Edit document"></div>
<div id="delete-confirm" title="Delete document" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This document will be permanently deleted. Are you sure?</p>
</div>